<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="../common/css/main.css">
  <link rel="stylesheet" href="../common/css/elementui.css">

  <style>

  </style>

</head>

<body>
  <div id="app">
    <div>indexedDB的学习</div>
    <button @click="addObjectStoreData">添加数据</button>
    <div>test</div>
  </div>
  <script src="../common/js/vue.main.js"></script> <!--vue生产cdn包-->
  <script src="../common/js/vuex.main.js"></script> <!--vue生产cdn包-->
  <script src="../common/js/vue-router.main.js"></script> <!--vue生产cdn包-->
  <script>

    let app = new Vue({
      el: "#app",
      components: {},
      props: {},
      data: () => {
        return {
          name: "login"
        }
      },
      computed: {},
      watch: {},
      created() { },
      mounted() {
        this.init_indexedDB()
      },
      methods: {
        addObjectStoreData() {
          let request = indexedDB.open("myDatabase", 1);
          request.onsuccess = (e) => {
            let db = e.target.result.transaction(["customer"], "readwrite"); //创建一个可读写事务
            let store = db.objectStore("customer") //获取对象仓库
            store.put({ name:"test", age: 12, email: "1192@163.com", id: "c5" })
            let put1 = store.put({ id: "c4", name: "test2", email: "1116@163.com", age: "60" }); //更新
            console.log("put1", put1);
            console.log(store.get("c1")); //获取
            store.delete(1) //删除id = 1的元素
            let res = store.openCursor(); //打开游标
            let result = [];
            res.onsuccess = (e) => {
              let cursor = e.target.result;
              if(cursor) {
                result.push(cursor.value);
                cursor.continue()
              } else {
                console.log("数据", result);
              }
            }
            db.oncomplete = () => {      
            }
          }
        },

        //初始化indexedDB
        init_indexedDB() {
          // 兼容低版本的浏览器
          var database = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

          var db;

          var request = database.open("myDatabase", 1); //打开一个数据库, 若不存在，在会创建 

          request.onupgradeneeded = (e) => { //更新数据库模式触发
            db = e.target.result //一个数据库

            var data = [ //测试数据
              { id: "c1", name: "菜菜子", email: "1212@163.com", age: "18" },
              { id: "c2", name: "肖", email: "1213@163.com", age: "20" },
            ]

            if (!db.objectStoreNames.contains("customer")) { //判断对象仓库存在不
              var objectStore = db.createObjectStore("customer", { keyPath: "id", autoIncrement: true }) //创建一个对象仓库, 键为id, 自动递增

              if(objectStore.indexNames.contains("name")) { //存在index
                objectStore.deleteIndex("name") //删除index
              }

              objectStore.createIndex("name", "name", { unique: false }) //名字可以重复

              objectStore.createIndex("email", "email", { unique: true }) // 邮箱不能重复

              objectStore.transaction.oncomplete = (e) => { //确保对象仓库创建完成
                var customerObject = db.transaction("customer", "readwrite").objectStore("customer") //创建事务
                //数据保存到新建的对象仓库
                data.forEach((item) => {
                  customerObject.add(item)
                })

                
              }
            }

          }

          request.onsuccess = (e) => {
            console.log("onsuccess", e);
          }

          request.onerror = (e) => {
            console.log("onerror", e);
          }

        }
      }
    })

  </script>
</body>

</html>